<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head>
	<th:block th:include="include :: header" />
	<th:block th:include="include :: jasny-bootstrap-css" />
	<th:block th:include="include :: bootstrap-fileinput-css" />
	<th:block th:include="include :: select2-css" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-knowledgeBase-add">
			<div class="form-group">
				<label class="col-sm-3 control-label">标题名称：</label>
				<div class="col-sm-5">
					<input id="baseName" name="baseName" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">类型名称：</label>
				<div class="col-sm-5">
					<select id="classifyId" name="classifyId" class="form-control" >
						<option value="">请选择知识类型</option>
						<option th:each="knowledgeClassify:${knowledgeClassifies}" th:value="${knowledgeClassify.classifyId}" th:text="${knowledgeClassify.classifyName}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">格式类型：</label>
				<div class="col-sm-5">
					<select name="formatType" class="form-control" th:with="type=${@dict.getType('business_format_type')}">
						<option value="">请选择格式类型</option>
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">封面图：</label>
				<div class="col-sm-5">
					<div class="fileinput fileinput-new" data-provides="fileinput">
						<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 120px;"></div>
						<div>
							<span class="btn btn-white btn-file"><span class="fileinput-new">选择封面图</span><span class="fileinput-exists">更改</span><input type="file" id="img"></span>
							<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
							<span style="width: 200px; height: 120px; color: red">请选择1M以内图片</span>
						</div>
					</div>
					<input id="coverImg" name="coverImg" type="hidden"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">视频地址：</label>
				<div class="col-sm-5">
					<input name="videoUrl" id="videoUrl" class="form-control" type="hidden"/>
					<div class="file-loading">
						<input id="fileinput-upload" type="file" multiple name="file">
					</div>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">文章内容：</label>
				<div class="col-sm-5">
					<textarea id="tinymceEditor" name="articleContent"></textarea>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: jasny-bootstrap-js" />
	<th:block th:include="include :: bootstrap-fileinput-js" />
	<th:block th:include="include :: select2-js" />
	<th:block th:include="include :: ztree-js" />
    <script th:src="@{/ajax/libs/tinymce/4.9.2/tinymce.min.js}"></script>
    <script type="text/javascript">
		var prefix = ctx + "business/knowledgeBase";

		$("#form-knowledgeBase-add").validate({
			rules:{
				xxxx:{
					required:true,
				},
			}
		});

		$(function(){
			//bootstrap-fileinput
            $("#fileinput-upload").fileinput({
                language: 'zh',
                'theme': 'explorer-fas',
                'uploadUrl': ctx + 'business/attachment/uploadMore',
                uploadAsync:false,//false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
                overwriteInitial: false,
                initialPreviewAsData: true,
                allowedFileExtensions : ['doc','docx','pdf','PDF',"xls", "xlsx","exe","bmp", "gif", "jpg", "jpeg", "png",
                    "ppt", "pptx", "html", "htm", "txt","rar", "zip", "mp3","mp4","MPEG","MP3\MPEG-4","MIDI","WMA"],//接收的文件后缀
                showPreview: true,
                showUpload: true, //是否显示上传按钮
                showCaption: true,//是否显示标题
                maxFileCount: 5, //表示允许同时上传的最大文件个数
                maxFileSize: 200000
            }).on("filebatchuploadsuccess", function(event, data) {
                console.log(data.response.url);
                $("#videoUrl").val(data.response.url);
            });

			$('#img').on('change.bs.fileinput', function (e) {
				var img = e.currentTarget.files[0];
				var formData = new FormData();
                formData.append("file", img);
				$.ajax({
					url: ctx + "business/attachment/upload",
					data: formData,
					type: "post",
					processData: false,
					contentType: false,
					success: function(result) {
						$("#coverImg").val(result.url);
					}
				});
			});
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
				var html = tinymce.activeEditor.getContent();
				$("#tinymceEditor").val(html);
	            $.operate.save(prefix + "/add", $('#form-knowledgeBase-add').serialize());
	        }
	    }








		function handleFile(file,id){

			let imgArr = [];
			let formData = new FormData(),fs = $(`#${file}`)[0].files;
			console.log(fs)
			imgArr.push(...fs)
			imgArr.filter((item,index)=>{
				console.log(item)

				formData.append(`file`, item);
			})


			$.ajax({
				type: "POST",
				url: ctx + "common/upload",
				data: formData,
				header:{
					contentType:"application/x-www-form-urlencoded"
				},
				cache: false,
				contentType: false,
				processData: false,
				dataType: 'json',
				success: function(result) {
					// imgArr = [],$(`#${file}`)[0].files = [];
					// let html = ``
					// result.url.filter(item,index=>{
					// 	html += `<div><img src="${item}" alt=""></div>`
					// })
					//
					// $(`#${id}`).html(html)
				},
				error: function(error) {
					$.modal.alertWarning("上传失败！");
				}
			});
			//
		}
	</script>
</body>
</html>
